<!--  -->
<template>
  <div>
    <ul class="shortcut">
      <li>
        <a href="#">
          <i class="iconfont icon-clock"></i>
          小米秒杀</a
        >
      </li>
      <li>
        <a href="#">
          <i class="iconfont icon-jianzhu"></i>
          企业团购</a
        >
      </li>
      <li>
        <a href="#">
          <i class="iconfont icon-VIP"></i>
          F码通道</a
        >
      </li>
      <li>
        <a href="#">
          <i class="iconfont icon-simqia"> </i>
          米粉卡</a
        >
      </li>
      <li>
        <a href="#">
          <i class="iconfont icon-shouji"></i>
          以旧换新</a
        >
      </li>
      <li>
        <a href="#">
          <i class="iconfont icon-38"></i>
          话费充值</a
        >
      </li>
    </ul>
    <ul class="imgs">
      <li>
        <a href="#"><img src="@/assets/img/picture/swiper-sub1.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="@/assets/img/picture/swiper-sub2.jpg" alt="" /></a>
      </li>
      <li>
        <a href="#"><img src="@/assets/img/picture/swiper-sub3.jpg" alt="" /></a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang='less' >
.shortcut,
.imgs,
li {
  float: left;
}
.shortcut {
  width: 228px;
  height: 170px;
  background-color: #5f5750;
  margin-right: 14px;
  padding-top: 2px;
  padding-left: 6px;
  li {
    position: relative;
    &:before {
      content: "";
      position: absolute;
      width: 64px;
      height: 1px;
      background-color: #665e57;
      left: 0;
      right: 0;
      top: 0;
      margin: 0 auto;
    }
  }

  a {
    display: block;
    color: #cfccca;
    height: 84px;
    width: 76px;
    font-size: 12px;
    text-align: center;
    overflow: hidden;
    &:hover {
      color: #fff;
    }
  }
  i {
    display: block;
    margin-top: 20px;
    margin-bottom: 6px;
    font-size: 20px;
  }
}

.shortcut li::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 64px;
  background-color: #665e57;
  left: 0;
  bottom: 0;
  top: 0;
  margin: auto 0;
}

.imgs li {
  width: 316px;
  margin-right: 15px;
  &:last-child {
    margin: 0;
  }
  img {
    width: 100%;
    vertical-align: top;
  }
}
</style>
